<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定class样式</title>
		<style>
			.basic{
				width: 300px;
				height:100px;
				text-align:center;
				border:1px solid yellow;
			}
			.happy{
				background-color:red;
				border:3px solid pink;
			}
			.normal{
				background-color:skyblue;
				border:1px solid yellow;
			}
			.sad{
				background-color:#eee;
				border:5px solid green;
			}
			.a{
				font-size:18px;
			}
			.b{
				font-size:30px;
			}
			.c{
				font-size:50px;
			}
		</style>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!--
		准备好一个容器
		-->
		<div id="root">
			<!-- 绑定class样式 字符串写法,适用于:样式的类名不确定,需动态去指定-->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
			<!-- 绑定class样式,数组写法,适用于:样式的类名不确定,需要动态指定-->
			<div class="basic" :class="classArr">{{name}}</div>
			<!-- 绑定class样式,对象写法,适用于:要绑定的样式的个数确定,名字也确定,但要动态决定用不用-->
			<div class="basic" :class="classObj">{{name}}</div>
			<!-- 绑定style样式  对象写法-->
			<div class="basic" :style="styleObj">{{name}}</div>
			<!-- 绑定style样式  数组写法-->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					name:'杭州',
					mood:'normal',
					classArr:['a','b','c'],
					classObj:{
						a:false,
						b:false,
						c:true
					},
					styleObj:{
						fontSize:'60px',
						backgroundColor:'orange'
					},
					styleArr:[
						{
							fontSize:'40px',
							backgroundColor:'pink'
						},
						{
							color:'gray'
						}
					]
				},
				methods:{
					changeMood(){
						//this.mood = 'happy';
						// 随机切换心情
						const arr = ['happy','normal','sad']
						const idx = Math.floor(Math.random() * 3);
						this.mood = arr[idx];
					}
				}
			});
		</script>
	</body>
</html>